<template>
  <div class="detail" v-if="service_detail"> 
    <cellbox class="top">
      <cell-item  class="top-picture" >
        <el-carousel  v-if="service_detail.imgList && service_detail.imgList.length" trigger="click" height="375px" > 
          <el-carousel-item v-for="item in service_detail.imgList" :key="item.goodsImgUrl">
              <div class="img" :style="{backgroundImage: 'url(' + item.goodsImgUrl + ')'}"   ></div>  
          </el-carousel-item>
        </el-carousel>
      </cell-item>

      <cell-item class="top-info">
        <div class="top-info-header" >
          <h4>{{service_detail.goodsName}}</h4>
          <state-tip 
            :class="{'negative': service_detail.status == 1}" 
            v-if="service_detail.checkStatus == 1 " >
              {{service_detail.status == 1 ? '已结束':'进行中'}}
          </state-tip>  
        </div>
        <p class="small weak">{{service_detail.remarks }}</p> 
        <div  class="price" >{{price | formatMoney}}</div>

        <cellbox class="selectItems table-row-height" style="display:table-row" v-for="(items,indexs) in service_detail.attributeMappingListUse" :key="items">
          <cell-item class="select-title">{{items.attrName+"："}}</cell-item>
          <cell-item> 
            <el-radio-group  v-model="items.sort" @change="radioChange" class="checker-plain" > 
              <el-radio  v-for="(item,index)  in items.selects" :label="item.attrCode" :key="item">{{item.attrName}}</el-radio>
            </el-radio-group>
          </cell-item>
        </cellbox>
        <cellbox class="num table-row-height"  style="display:table-row"  v-if="(service_detail.checkStatus === 1) && (service_detail.status != 1)" > 
          <cell-item class="select-title" >数量：</cell-item>
          <cell-item>
            <el-input-number controls="true" class="input-number-primary"  size="small"  v-model="currentNum"  :min="0" :max="matchedStock.buyTimesLimit == 0 ? matchedStock.stock : matchedStock.buyTimesLimit"></el-input-number> 
            <span class="weak small">{{matchedStock.buyTimesLimit == 0 ? `库存${matchedStock.stock}个` : `库存${matchedStock.stock}个, 限购${matchedStock.buyTimesLimit}个`}}</span>
          </cell-item>
        </cellbox>  

        <div class="tips actived-tips"  v-if="(service_detail.checkStatus === 1) && (service_detail.status != 1)"  >  
          你已经选择了【
          <span  class="select-tips" v-for="(items,index) in service_detail.attributeMappingListUse"  :key="items">
            <span v-for="item  in items.selects" v-if="items.sort === item.attrCode"  :key="item">{{item.attrName}}</span>
          </span> 
          】
        </div> 
        <ol class="tips" v-if="!((service_detail.checkStatus == 1) && (service_detail.status != 1)) ">
          <h4>{{goodsStateList[service_detail.checkStatus].title}}</h4>
          <li class="weak"  v-if="service_detail.checkStatus == 2" >{{service_detail.checkOpinion}}</li>
          <li class="weak"  v-if="service_detail.checkStatus != 2"
            v-for='item in goodsStateList[service_detail.checkStatus].tips'  
            :key='item.text'
          >
            {{item.text}}
          </li>
        </ol>
      </cell-item>
    </cellbox>
    <div class="main">
      <el-tabs v-model="activeName">
        <el-tab-pane label="详情" name="first">
          <div class="lab">
            <el-row class='detail-table'>
              <el-col :span="8" v-if="service_detail.brandName">
                <span>品牌：</span>
                <span>{{service_detail.brandName}}</span>
              </el-col>
              <el-col :span="8" v-for="item in service_detail.baseFieldList"  :key="item"  v-if="item.valueTexts[0]" >
                <span>{{item.nameText+"："}}</span>
                <span v-if="item.valueType == 3">{{item.valueTexts[0]+'  --  '+item.valueTexts[1]}}</span>
                <span v-else-if="item.valueType == 4">
                  <span v-for="addr in item.valueTexts" :key="addr">{{addr}}</span>
                </span>
                <span v-else-if="item.valueType == 5 || item.valueType == 7">
                  <span v-for="(addr,index) in item.valueTexts" :key="addr">
                    {{addr}}
                    <span>{{(index + 1) < (item.valueTexts.length) ? '，' : ''}}</span>
                  </span>
                </span>
                <span v-else>{{item.valueTexts[0]}}</span>
              </el-col>
            </el-row>
          </div>
          <div class="rich-text" v-html="service_detail.descPc" ></div>
        </el-tab-pane>
        <el-tab-pane label="相关信息" name="second">
          <cellbox class="info-list " v-for="(item,index) in service_detail.otherFieldList"   v-if="item.valueTexts[0]" :key="item">
            <span >{{item.nameText+"："}}</span>
            <span v-if="item.valueType == 3">{{item.valueTexts[0]+'  --  '+item.valueTexts[1]}}</span>
            <span v-else-if="item.valueType == 4">
              <span v-for="addr in item.valueTexts" :key="addr">{{addr}}</span>
            </span>
            <span v-else-if="item.valueType == 5 || item.valueType == 7">
              <span v-for="(addr,index) in item.valueTexts" :key="addr">
                {{addr}}
                <span>{{(index + 1) < (item.valueTexts.length) ? '，' : ''}}</span>
              </span>
            </span>
            <span v-else>{{item.valueTexts[0]}}</span> 
          </cellbox>
        </el-tab-pane>
      </el-tabs>
    </div> 
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import StateTip from './components/StateTip'
export default {
  components: {
    StateTip
  },
  computed: {
    ...mapGetters({
      service_detail: 'service_detail'
    })
  },
  mounted () {
    let goodsCode = ''
    let rdmkey = ''
    let url = ''
    if (this.$route.params.serviceId === 'preview') { // 不需要登录的
      rdmkey = this.GetQueryString('rdmkey')
      url = '/preview/goods'
    } else {     // 需要登录的
      goodsCode = this.$route.params.serviceId
      url = '/goods/getGoods'
    }
    this.$store.dispatch('service_detail', {goodsCode, rdmkey, url})
    .then(() => {
      this.radioChange()
      // 详情下面属性，高度控制
      let tableRow = document.querySelectorAll('.detail-table .el-col-8')
      let tableRowRes = []
      let tableRowGroup = []
      for (let i = 0; i < tableRow.length; i++) {
        tableRowRes.push(tableRow[i].offsetHeight)
      }
      for (let j = 0; j < Math.ceil(tableRowRes.length / 3); j++) {
        let endIndex = tableRowRes.length > (3 * (j + 1)) ? 3 * (j + 1) : tableRowRes.length
        tableRowGroup.push(tableRowRes.slice(3 * j, endIndex))
        for (let m = 3 * j; m < endIndex; m++) {
          tableRow[m].style.height = Math.max.apply(Math, tableRowGroup[j]) + 'px'
        }
      }
    })
  },
  data () {
    return {
      activeName: 'first',
      radioValueList: [], // 选中的value
      matchedStock: [], // 库存匹配结果
      currentNum: 1, // 选择商品的数量
      goodsStateList: [
        {
          title: '商品审核中',
          tips: [
            {text: '1、请耐心等待审核结果'},
            {text: '2、可以继续发布其他商品或服务'}
          ]
        },
        {
          title: '商品已结束',
          tips: [
            {text: '1、请联系卖家咨询'},
            {text: '2、逛逛商家的其他商品或服务'}
          ]
        },
        {
          title: '商品审核不通过'
        }
      ],
      price: 0
    }
  },
  methods: {
    GetQueryString (name) {
      let after = window.location.hash.split('?')[1]
      if (after) {
        let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
        let r = after.match(reg)
        if (r != null) {
          return decodeURIComponent(r[2])
        } else {
          return null
        }
      }
    },
    radioChange () {
      this.currentNum = 1
      if (this.service_detail) {
        for (let i = 0; i < this.service_detail.attributeMappingListUse.length; i++) {
          this.radioValueList[i] = this.service_detail.attributeMappingListUse[i].sort
        }
        let radioValue = this.radioValueList.sort()
        for (let j = 0; j < this.service_detail.goodsSkuList.length; j++) {
          let minValue = this.service_detail.goodsSkuList[j].attrCodeList.sort()
          if (radioValue.join('') === minValue.join('')) {
            this.matchedStock = this.service_detail.goodsSkuList[j]
            this.price = this.service_detail.goodsSkuList[j].price
            this.currentNum = (this.matchedStock.stock < 1) ? 0 : 1
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~styles/var';
.detail-table{
  .el-col-8{
    padding: 5px 10px;
    text-align: justify;
    >span:nth-of-type(1){
      font-weight:800;
    }
  }
}
.detail{
  word-break:break-all;
}
.table-row-height{
  height: 50px;
  &.num{
    height: 61px;
  }
}
.img{
  height: 100%;
  background-repeat: no-repeat;
  background-position:center center;
  background-size:cover;
  }
.top{
  padding: 30px;
  .top-picture{
    width: 500px;
    .el-carousel{
      overflow: hidden;
    }
  }
  .top-info{
    padding-left: 40px;
    .select-title{
      width: 50px;
      line-height: 40px;
      white-space: nowrap;
      padding-right: 10px;
    }
    .top-info-header{
      line-height: 24px;
      margin-bottom:5px;
      h4{
        font-size: 24px;
        font-weight: normal;
        display: inline;
      }
    }
    p{
      line-height: 16px;
    }
    .price{
      line-height: 76px;
      font-size: 30px;
      color: #fc6f00;
    }
    .selectItems{
      margin-bottom: 10px;
    }
    .num{
      padding:3px 0 34px;
      .cell-item{
        vertical-align: middle;
        &.select-title{
          line-height: 30px;
        }
      }
      
    }
    .tips{
      margin-top: 5px;
      width: 500px;
      background: #f5f5f5;
      text-align: justify;
      
      padding:14px 20px 8px;
      box-sizing:border-box;
      &.actived-tips{
        margin-top: 40px;
        padding:18px 20px;
      }
      .select-tips{
        span{
          margin: 0 6px;
        }
      }
      h4{
        font-size: 18px;
        font-weight: 600px;
        line-height: 30px;
      }
      li{
        line-height: 24px;
        margin: 4px 0;
      }
    }
    .actived-tips{
      color: #fc6f00;
    }
  }
}
.main{
  min-height: 100%;
  border-top:20px solid $background-color;
  background: #fff;
  .el-tab-pane{
    margin: 28px 60px;
    .lab{
      line-height: 30px;
      margin-bottom: 34px;
    }
  }
  .info-list{
    line-height: 26px;
    margin-bottom:17px;
    >span:nth-of-type(1){
      font-weight:800;
    }
  }
}
.frame .detail {
    padding: 0;
}
</style>
<style  lang="scss" >
  .detail{
    .rich-text{
      p{
        line-height: 36px;
        padding: 10px 0;
        text-indent:2em;
        img{
          width:100%;
          display: block;
          margin-bottom:30px;
        }
      }
    }
    .checker-plain.el-radio-group {
      margin: 0;
    }
    .el-carousel__button {
      width: 10px;
      height: 10px;
      border-radius:100%;
      opacity: 1;
    }
    .el-carousel__indicator.is-active button {
       background-color: #fcaf16;
    }
    .el-carousel__arrow {
      width: 21px;
      height: 64px;
      border-radius: 0;
      background-color: rgba(0, 0, 0, 0.4);
      font-size: 21px;
    }
    .el-carousel__arrow--left{
      left: 0;
    } .el-carousel__arrow--right {
      right: 0;
    }
    .el-carousel__arrow i{
      transform: scale(1,1.8);
    }
    .el-tabs__header{
      .el-tabs__nav{
        height:60px;
        line-height:60px;
        margin-left:60px;
        div{
          min-width:100px;
          text-align:center;
        }
      }
    }
  }
</style>
